<template>
  <Resizeable :driver="2" :leftWidthLimit="{ min: 370, max: 900 }">
    <template #left>
      <SearchBlock @doSearch="conditionhandler" @changeModel="changeModel">
      </SearchBlock>
      <div class="starListWrapper">  
        <div class="manageTip"><PlusCircleOutlined /><span>新建笔记</span></div>
        <div class="starTypeWrappers">
          <StarType
            v-for="(type, index) in types"
            :key="type.name"
            :starType="type"
            :active="active === index"
            @click="choseType(index)"
          >
            <Component :is="type.icon" :style="{ fontSize: '19px' }" />
          </StarType>
        </div>
      </div>
    </template>
    <template #right>
      <div class="rightContent">
        <CommonHeader>
        </CommonHeader>
      </div>
    </template>
  </Resizeable>
</template>
<script lang="ts" setup>
import {
  PlusCircleOutlined,
  AppstoreOutlined,
  ClockCircleOutlined,
  LinkOutlined,
  PictureOutlined,
  FileTextOutlined,
  FolderOpenOutlined,
  CommentOutlined,
  SoundOutlined,
  EnvironmentOutlined
} from '@ant-design/icons-vue'
import SearchBlock from '@/components/SearchBlock.vue'
import CommonHeader from '@/components/CommonHeader.vue'
import Resizeable from '@/components/custom/Resizeable/index.vue'
import StarType from '@/components/StarType.vue'
import { reactive, ref } from 'vue'
const types = [
  {
    name: '全部收藏',
    icon: AppstoreOutlined
  },
  {
    name: '最近使用',
    icon: ClockCircleOutlined
  },
  {
    name: '链接',
    icon: LinkOutlined
  },
  {
    name: '图片与视频',
    icon: PictureOutlined
  },
  {
    name: '笔记',
    icon: FileTextOutlined
  },
  {
    name: '文件',
    icon: FolderOpenOutlined
  },
  {
    name: '聊天记录',
    icon: CommentOutlined
  },
  {
    name: '语音',
    icon: SoundOutlined
  },
  {
    name: '位置',
    icon: EnvironmentOutlined
  }
]
const active = ref<Number>(0)
const choseType = (index: Number) => {
  active.value = index
}
</script>
<style lang="less" scoped>
.starListWrapper {
  flex: 1;
  background-color: #e6e6e6;
  .starTypeWrappers {
    padding-top: 10px;
    width: 93.5%;
    margin: 0 auto;
  }

  .manageTip {
    width: 90.5%;
    background-color: white;
    margin: 15px auto;
    padding: 8px;
    text-align: center;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
}
</style>
